<template>
  <footer class="footer">
    <span class="todo-count"> 剩余<strong>{{count}} </strong> </span>
    <!-- 用户点击了那个按钮 把状态传给app -->
    <ul class="filters" @click="selFn">
      <li>
        <!-- 点击三个按钮 分别根据isSel的状态 决定谁有类名 -->
        <a
          :class="{ selected: isSel === 'all' }"
          @click="isSel = 'all'"
          href="javascript:;"
          >全部</a
        >
      </li>
      <li>
        <a
          :class="{ selected: isSel === 'no' }"
          @click="isSel = 'no'"
          href="javascript:;"
          >未完成</a
        >
      </li>
      <li>
        <a
          :class="{ selected: isSel === 'yes' }"
          @click="isSel = 'yes'"
          href="javascript:;"
          >已完成</a
        >
      </li>
    </ul>
    <button class="clear-completed" @click="clearFn">清除已完成</button>
  </footer>
</template>

<script>
export default {
  props: ['fArr'], // 接收有筛选条件的数据
  // 定义变量 isSel 状态
  data() {
    return {
      isSel: 'all' // 状态: 全部all  已完成yes  未完成no  默认是all
    }
  },
  methods: {
    // 切换筛选条件
    selFn() {
      // 子组件传递给父组件  把类型字符串传给父组件
      this.$emit('changeType', this.isSel)
    },
    clearFn(){
      this.$emit('clear')
    }
  },
  computed: {
    count() {
      return this.fArr.length // 用计算属性表示list长度 也可以直接用数组长度
    }
  }
}
</script>

<style>
</style>